<template>
  <el-card :bordered="false" class="addOrder addCoupon">
    <el-page-header
      @back="$router.go(-1)"
      style="margin-bottom: 10px"
    ></el-page-header>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <!-- 基本信息 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">基本信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="24">
            <el-form-item label="优惠券名称：" prop="couponName">
              <el-input
                v-model="ruleForm.couponName"
                style="width: 40%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="发行总量：" prop="couponNum">
              <el-input-number
                v-model="ruleForm.couponNum"
                style="width: 40%"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="活动描述：">
              <el-input
                v-model="ruleForm.activityDec"
                placeholder="请填写活动描述"
                type="textarea"
                :disabled="disabled"
                style="width: 40%"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="领取时间：" prop="lingquTime">
              <el-date-picker
                v-model="lingquTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 40%"
                @change="lingquTimeChange"
                :default-time="['00:00:00', '23:59:59']"
                >></el-date-picker
              >
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="用券有效期：" prop="types">
              <el-radio-group
                v-model="ruleForm.types"
                @change="typesChange"
                style="width: 40%"
                class="radio"
              >
                <el-radio label="00">
                  <el-date-picker
                    v-model="yongQuanTime"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 100%"
                    @change="yongQuanTimeChange"
                    format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']"
                    :disabled="ruleForm.types != '00'"
                    >></el-date-picker
                  >
                </el-radio>
                <el-radio label="01">
                  领券当日起
                  <el-input-number
                    v-model="ruleForm.validdays"
                    style="width: 30%"
                    controls-position="right"
                    :min="0"
                    :disabled="ruleForm.types != '01'"
                  ></el-input-number
                  >天内可用
                </el-radio>
                <el-radio label="02">
                  领券次日起
                  <el-input-number
                    v-model="ruleForm.validdays1"
                    style="width: 30%"
                    controls-position="right"
                    :min="0"
                    :disabled="ruleForm.types != '02'"
                  ></el-input-number
                  >天内可用
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <!-- <el-form-item label="所属业务：" prop="businessType">
              <el-checkbox-group v-model="ruleForm.businessType" @change="businessTypeChange">
                <el-checkbox label="01">全部业务</el-checkbox>
                <el-checkbox
                  label="02"
                  :disabled="ruleForm.businessType.some((item, index) => {return item == '01'})"
                >商超</el-checkbox>
                <el-checkbox
                  label="03"
                  :disabled="ruleForm.businessType.some((item, index) => {return item == '01'})"
                >洗衣</el-checkbox>
                <el-checkbox
                  label="04"
                  :disabled="ruleForm.businessType.some((item, index) => {return item == '01'})"
                >家政</el-checkbox>
                <el-checkbox
                  label="05"
                  :disabled="ruleForm.businessType.some((item, index) => {return item == '01'})"
                >咖吧</el-checkbox>
              </el-checkbox-group>
            </el-form-item> -->
            <el-form-item label="所属业务：" prop="businessType">
              <el-radio-group v-model="ruleForm.businessType">
                <el-radio label="02">商超</el-radio>
                <el-radio label="03">洗衣</el-radio>
                <el-radio label="04">家政</el-radio>
                <el-radio label="05">咖吧</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="领取人限制：">
              <el-radio-group v-model="recipients" @change="recipientsChange" class="radio">
                <el-radio label="00">不限制，所有人可领</el-radio>
                <el-radio label="01">
                  <el-select
                    v-model="ruleForm.receiveLimit"
                    placeholder="请选择会员等级"
                    :disabled="recipients != '01'"
                  >
                    <el-option
                      v-for="item in hyList"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    ></el-option>
                  </el-select>
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="每人限领次数：" class="radio">
              <el-radio-group v-model="unlimited" @change="receiveNumChange">
                <el-radio label="00">不限次数</el-radio>
                <el-radio label="01">
                  <el-input-number
                    v-model="ruleForm.receiveNum"
                    style="width: 30%"
                    controls-position="right"
                    :min="1"
                    :max="10000"
                    :disabled="unlimited != '01'"
                  ></el-input-number
                  >请输入1-10000的限领次数, 如 1
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">规则设置</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="12">
            <el-form-item label="优惠条件：">
              <el-radio-group v-model="receiveLimit" @change="receiveNumChange" class="radio">
                <el-radio label="00">
                  满金额，满
                  <el-input-number
                    v-model="ruleForm.fullAmount"
                    style="width: 30%"
                    controls-position="right"
                    :min="0"
                    :disabled="receiveLimit == '01'"
                  ></el-input-number
                  >元
                </el-radio>
                <el-radio label="01">无条件</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="12">
            <el-form-item label="优惠内容：">
              <el-radio-group v-model="yhContent" @change="yhContentChange" class="radio">
                <el-radio label="00">
                  减免
                  <el-input-number
                    v-model="ruleForm.discountAmount"
                    style="width: 33%"
                    controls-position="right"
                    :min="0"
                    :disabled="yhContent == '01'"
                  ></el-input-number
                  >元
                </el-radio>
                <el-radio label="01">
                  享受
                  <el-input-number
                    v-model="ruleForm.discount"
                    style="width: 30%"
                    controls-position="right"
                    :min="0"
                    :disabled="yhContent == '00'"
                  ></el-input-number
                  >折
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 商品信息 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">
          <span>店铺设置</span>
          <el-button
            type="primary"
            style="margin-left: 10px; position: relative; top: -3px"
            @click="addStore"
            >选择门店</el-button
          >
        </span>
        <buyingIfor
          slot="table"
          ref="buyingIfor"
          style="margin: 10px 0px 10px 10px"
          @delGoods="delGoods"
        />
      </com-title>

      <!-- 商品信息 -->
      <!-- <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">
          <span>商品设置</span>
          <el-button
            type="primary"
            style="margin-left: 10px; position: relative; top: -3px"
            @click="addGoods"
            >选择商品</el-button
          >
        </span>
        <buyingIfor1
          slot="table"
          ref="buyingIfor1"
          style="margin: 10px 0px 10px 10px"
        />
      </com-title> -->
      <div class="content">
        <el-button
          type="primary"
          @click="submitSave('ruleForm')"
          v-if="!this.$route.query.couponId"
          >创建优惠券</el-button
        >
        <el-button type="primary" @click="upData('ruleForm')" v-else
          >修改优惠券</el-button
        >
        <el-button @click="quxiao('ruleForm')">取消</el-button>
      </div>
    </el-form>
    <choiceShop ref="choiceShop" @trigger="trigger" />
    <choiceGoods ref="choiceGoods" @trigger="trigger1" />
  </el-card>
</template>

<script src='./index.js'></script>

<style lang="scss">
.addOrder {
  .content {
    text-align: center;
    margin: 20px 0px;
    button {
      margin-right: 10px;
    }
  }
}
.addCoupon {
  .radio {
    .el-radio {
      display: block;
    }
    .el-radio:nth-child(2) {
      margin: 20px 0px;
    }
    .el-input-number__increase {
      display: none !important;
    }
    .el-input-number__decrease {
      display: none !important;
    }
    .el-input-number.is-controls-right .el-input__inner {
      padding-right: 15px !important;
    }
  }
}
</style>
